<template>
  <div class="page_main">
    <LeiBreadCrumb :activePath="activePath"></LeiBreadCrumb>
    <el-card>
      <LeiSlider title="生产计划任务查询" />
      <div class="project_search">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="所属范围" required>
            <el-select v-model="form.levelVal" placeholder="选择部门">
              <el-option
                v-for="item in form.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input
              v-model="form.projectName"
              placeholder="请输入项目名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="计划编号">
            <el-input
              v-model="form.projectNo"
              placeholder="请输入计划编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="计划类别">
            <el-select v-model="form.projectVal" placeholder="请选择计划类别">
              <el-option
                v-for="item in form.projectList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              placeholder="请选择开始时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="请选择结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select v-model="form.taskStatus" placeholder="请选择任务状态">
              <el-option
                v-for="item in form.taskList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="紧要程度">
            <el-select
              v-model="form.importantStatus"
              placeholder="请选择紧要程度"
            >
              <el-option
                v-for="item in form.importantList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              v-model="form.keyword"
              placeholder="请输入关键词"
            ></el-input>
          </el-form-item>
        </el-form>
        <LeiFooter @reset-form="resetForm" />
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部任务" name="first">
          <lei-table
            :tableData="tableData"
            :columns="columns"
            :pageObj="pageObj"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            :operation="false"
          >
            <el-table-column slot="TaskStatus" label="任务状态" align="center">
              <template slot-scope="scope">
                <el-button type="default">默认</el-button>
                <el-button type="primary">设置</el-button>
              </template>
            </el-table-column>
            <el-table-column slot="operation" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="default">查看详情</el-button>
              </template>
            </el-table-column>
          </lei-table>
        </el-tab-pane>
        <el-tab-pane label="下属任务" name="second"
          ><lei-table
            :tableData="tableData"
            :columns="columns"
            :pageObj="pageObj"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            :operation="false"
          >
            <el-table-column slot="TaskStatus" label="任务状态" align="center">
              <template slot-scope="scope">
                <el-button type="default">默认</el-button>
                <el-button type="primary">设置</el-button>
              </template>
            </el-table-column>
            <el-table-column slot="operation" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="default">查看详情</el-button>
              </template>
            </el-table-column>
          </lei-table></el-tab-pane
        >
        <el-tab-pane label="我参与的" name="third"
          ><lei-table
            :tableData="tableData"
            :columns="columns"
            :pageObj="pageObj"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            :operation="false"
          >
            <el-table-column slot="TaskStatus" label="任务状态" align="center">
              <template slot-scope="scope">
                <el-button type="default">默认</el-button>
                <el-button type="primary">设置</el-button>
              </template>
            </el-table-column>
            <el-table-column slot="operation" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="default">查看详情</el-button>
              </template>
            </el-table-column>
          </lei-table></el-tab-pane
        >
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activePath: {
        path: '',
        title: '排产管理',
      },

      form: {
        projectName: '',
        projectNo: '',
        levelVal: '',
        options: [
          {
            value: '选项1',
            label: '黄金糕',
          },
          {
            value: '选项2',
            label: '双皮奶',
          },
          {
            value: '选项3',
            label: '蚵仔煎',
          },
          {
            value: '选项4',
            label: '龙须面',
          },
          {
            value: '选项5',
            label: '北京烤鸭',
          },
        ],
        projectVal: '',
        projectList: [
          { label: 'PC', id: 0 },
          { label: '钢结构', id: 1 },
        ],
        startTime: '',
        endTime: '',
        taskStatus: '',
        taskList: [
          { label: '未开始', id: 0 },
          { label: '进行中', id: 1 },
        ],
        importantStatus: '',
        importantList: [
          { label: '重要', id: 0 },
          { label: '紧急', id: 1 },
        ],
        keyword: '',
      },

      pageObj: {
        pageNum: 1,
        pageSize: 10,
        total: 1,
      },
      tableData: [],
      columns: [
        { label: '计划时间', prop: 'name' },
        { label: '项目名称', prop: 'age' },
        { label: '负责人员/班组', prop: 'sex' },
        { slot: 'TaskStatus' },
        { label: '异常/警告', prop: 'hobby' },
        { label: '构建数量', prop: 'hobby' },
        { label: '构建重量(kg)', prop: 'hobby' },
        { label: '重要程度', prop: 'hobby' },
        { label: '完成进度', prop: 'hobby' },
        { slot: 'operation' },
      ],

      activeName: 'first',
    }
  },
  methods: {
    // 重置
    resetForm() {
      this.form = {}
    },

    handleSizeChange(val) {
      this.pageObj.pageNum = 1
      console.log('页码大小发生变化', val)
    },
    handleCurrentChange(val) {
      console.log('当前页码大小发生变化', val)
    },

    handleClick(tab, event) {
      console.log(tab, event)
      console.log('activeName', this.activeName)
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  margin-top: unset !important;
}
</style>